<template>
	<div>
		<!-- 头部  -->
		<div class="mianTop">
			<div class="mianFlat">
				<h2 class="mianTopFeng">小猪配齐</h2>
				<a class="mianTopHui">品牌特价买卖</a>
			</div>
			<div class="mianRith">
				<a  @click="dodenglu()"  class="deng">登陆</a>
				<van-icon name="bars" size="20" />
			</div>
		</div>
		<!-- search搜索 start -->
		<van-search v-model="value" placeholder="请输入搜索关键词" @input="input"/>
		<div class="search" v-show='!search'>
			<div class="hui">
				<div class="commendMian" v-for="(tui,i) in list" :key='i'>
					<img class="commendImg" :src="tui.picUrl" />
					<span class="flet">{{tui.name}}</span>
					<div class="commendyuan">
						<span>¥{{tui.retailPrice}}元</span>
					</div>
					<div class="commendNumber">
						<span>{{tui.retailPrice-90}}人购买</span>
						<van-icon name="shopping-cart" color="#F688A4" size="30" />
					</div>
				</div>
			</div>
		</div>
		<!-- search搜索 end -->
	
		<div v-show='search'>
			<!-- 轮播 start -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(image, index) in banner" :key="index">
					<img :src="image.url" style="width: 100%; height: 100%;" />
				</van-swipe-item>
			</van-swipe>
			<!-- 轮播 end -->
			<!-- 列表stat -->
			<van-grid :column-num="3" >
				<van-grid-item  @click='liebiao(value)'  v-for="value in channel" :icon="value.iconUrl" :text="value.name" />
			</van-grid>
			<!-- 列表 end -->
			<!-- 秒杀 star -->
			<div class="">
				<van-notice-bar :scrollable="false" left-icon="volume-o" color='#E0499D' text="特价大甩卖" />
				<div class=" Sale">
					<span class="SaleFlet">秒杀专场</span>
					<span>查看跟多</span>
				</div>
				<!-- tab  start -->
				<!-- {{new Date() | formatDate('HH:00') }} -->
				<van-tabs v-model="active" title-active-color='#E0499D'>
					<van-tab v-for='(index,i) in newGoodsList' :key='i' :title="'抢购中' + shijiang  ">
						<van-card :price="index.counterPrice" :title="index.name" :thumb="index.picUrl" />
						<div class="mian"></div>
						<div class="mianFlex">
							<span>已售{{index.retailPrice + 50}}%</span>
							<span>{{index.retailPrice}}人购买</span>
						</div>
						<button class="mianQiang">马上抢购</button>
					</van-tab>
					<van-tab title="12:00  秒杀 ">
						<van-card price="256.00" title="雷蛇 Razer 狼蛛" thumb="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/635780/2021/0521/26/0d7133f1-b3b5-4077-a94a-cc1c0bd7f7d1_356x356_90.jpg" />
						<div class="mian"></div>
						<div class="mianFlex">
							<span>已售40%</span>
							<span>886人购买</span>
						</div>
						<button class="mianQiang">马上抢购</button>
					</van-tab>
				</van-tabs>
				<!-- tab end -->
			</div>
			<!-- 秒杀 end -->
			<!-- 推荐商品 start -->
			<div class="commend">
				<span>推荐商品</span>
				<span>查看跟多>></span>
			</div>
			<div class="hui">
				<div class="commendMian" v-for="(tui,i) in hotGoodsList" :key='i' @click="DetailPages(tui)" >
					<img class="commendImg" :src="tui.picUrl" />
					<span class="flet">{{tui.name}}</span>
					<div class="commendyuan">
						<span>¥{{tui.retailPrice}}元</span>
						<span> <a>¥{{tui.counterPrice}}元</a></span>
					</div>
					<div class="commendNumber">
						<span>{{tui.retailPrice-90}}人购买</span>
						<van-icon name="shopping-cart" color="#F688A4" size="30" />
					</div>
				</div>
			</div>
			
			<!-- 推荐商品 end -->
			<!-- floorGoodsList start -->
			<div v-for="(floorGoods,i) in floorGoodsList" :key='i'  >
				<div class="commend">
					<span>{{floorGoods.name}}</span>
					<span @click="examine(floorGoods)">查看跟多>></span>
				</div>
				<div class="hui">
					<div class="commendMian" v-for="(floor,i) in floorGoods.goodsList" :key='i' @click="DetailPages(floor)">
						<img class="commendImg" :src="floor.picUrl" />
						<span class="flet">{{floor.name}}</span>
						<div class="commendyuan">
							<span>¥{{floor.retailPrice}}元</span>
						</div>
					</div>
				</div>
			</div>
			<!--floorGoodsList end  -->
		</div>
		<!-- {{$store.state.op}} -->
	</div>
</template>

<script>
	import {
		Button,
		Icon,
		Search,
		Swipe,
		SwipeItem,
		Lazyload,
		Grid,
		GridItem,
		Cell,
		CellGroup,
		NoticeBar,
		Tab,
		Tabs,
		Card,
		Tabbar,
		TabbarItem
	} from 'vant';
	import API from '../utils/API.js'
	export default {
		name: 'App',
		data() {
			return {
				search:true,
				value: '',
				active: '',
				channel: [],
				brandList: [],
				banner: [],
				newGoodsList: [],
				shijiang: '',
				hotGoodsList: [],
				floorGoodsList: [],
				list:[]
			};
		},
		components: {
			[Button.name]: Button,
			[Icon.name]: Icon,
			[Search.name]: Search,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Lazyload.name]: Lazyload,
			[Grid.name]: Grid,
			[GridItem.name]: GridItem,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[NoticeBar.name]: NoticeBar,
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Card.name]: Card,
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem,
		},

		created() {
console.log()
			this.$get(API.GET_HOME_INFO)
				.then(res => {
					// console.log(res.data.data)

					this.banner = res.data.data.banner
					this.brandList = res.data.data.brandList
					this.channel = res.data.data.channel
					this.newGoodsList = res.data.data.newGoodsList
					 this.hotGoodsList = res.data.data.hotGoodsList
					this.floorGoodsList = res.data.data.floorGoodsList
				

				})

			Date.prototype.format = function(format) {
				var o = {
					"M+": this.getMonth() + 1, //month
					"d+": this.getDate(), //day
					"h+": this.getHours(), //hour
					"m+": this.getMinutes(), //minute
					"s+": this.getSeconds(), //second
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
					"S": this.getMilliseconds() //millisecond
				}
				if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
					(this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(format))
						format = format.replace(RegExp.$1,
							RegExp.$1.length == 1 ? o[k] :
							("00" + o[k]).substr(("" + o[k]).length));
				return format;
			}
			var date1 = new Date().format('hh:00');
			this.shijiang = date1




		},
		methods: {
			dodenglu(){
				// 登录页面
				this.$router.push({path:"/member"})
			},
			input() {
				console.log(this.value)
				this.$get(API.GET_GOODS_LIST,{
					keyword:this.value
				})
				.then( res => {
					console.log(res)
					if(this.value ==''){
						this.search = true
					}else{
						this.search = false
					}
					this.list = res.data.data.list
				}) 
			},
			DetailPages(event){
				// console.log(event.id)
				this.$router.push({
					path:'/particulars',
					query:{
						id:event.id
					}
				})
			},
			examine(event){
				console.log(event.id)
			},
			liebiao(e){
				this.$router.push({
					path:'/classify',
					query:{
						id:e.id
					}
				})
				console.log(e.id)
			}
		}
	}
</script>

<style lang="less" scoped>
	.mianTop {
		display: flex;
		align-items: center;
		padding: 0 12px;
	}

	.mianFlat {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.mianTopFeng {
		font-size: 20px;
		color: #E0499D;
	}

	.mianTopHui {
		font-size: 14px;
		color: #98989F;
		margin-left: 20px;
	}

	.mianRith {
		display: flex;
		align-items: center;
	}

	.deng {
		color: #585c64;
		margin-right: 15px;
	}
// search
.search{
	width: 100vw;
	height: 100vh;
}
	/* 轮播 */
	.my-swipe .van-swipe-item {
		height: 150px;
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;

	}

	/* 秒杀 */
	.Sale {
		display: flex;
		align-items: center;
		padding: 0 20px 0 30px;
		margin-bottom: 10px;
	}

	.Sale span:nth-child(1) {
		flex: 1;
		color: #101010;
		font-size: 18px;
	}

	.Sale::before {
		content: "";
		width: 4px;
		height: 20px;
		display: block;
		margin-right: 5px;
		background-color: #FFAAFF;

	}

	.Sale span:nth-child(2) {
		color: #969696;
		font-size: 14px;
	}

	/* tab */
	.van-tabs__line {
		width: 0 !important;

	}

	.van-tabs__content {
		margin-top: 8px;
		padding: 0 20px !important;
	}

	.van-tabs {
		margin-bottom: 54px !important;
	}

	.van-tab {
		font-size: 16px;
		font-weight: 600;

	}

	.van-tab__text--ellipsis {
		display: block;
		padding: 0 17px;

	}

	.van-tabs__nav--line {
		text-align: center;
	}

	.van-card__price {
		color: #DB0E0E;
	}

	.van-card__title {
		line-height: 39px;
		max-height: 46px;
		font-weight: 503;
	}

	.van-tab__pane {
		position: relative;
	}

	.mian {
		position: absolute;
		top: 0;
		margin-left: 33%;
		margin-top: 13%;
		width: 130px;
		height: 6px;
		background-color: #FFAAFF;
		border-radius: 25px;
		overflow: hidden;
	}

	.mian::after {
		content: "";
		width: 50%;
		height: 100%;
		display: block;
		margin-right: 5px;
		background-color: #ff0000;
	}

	.mianFlex {
		position: absolute;
		bottom: 0;
		right: 0;
		margin-bottom: 13px;
		margin-right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;

	}

	.mianQiang {
		position: absolute;
		right: 46px;
		width: 150px;
		height: 37px;
		background-color: #FF0000;
		color: #FFFFFF;
		border: 0;
		font-size: 15px;
		border-radius: 4px;
	}

	/* 推荐商品 */
	.hui {
		display: flex;
		flex-wrap: wrap;

	}

	.commend {
		display: flex;

		padding: 20px 20px;
		font-size: 3px;
		border-top: 1px solid #b5b5b5;
		border-bottom: 1px solid #b5b5b5;
	}

	.commend span:nth-child(2) {
		color: #969696;
	}

	.commend span:nth-child(1) {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: 13px;
	}

	.commend span:nth-child(1)::after {
		position: absolute;
		content: "";
		top: 6px;
		right: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commend span:nth-child(1)::before {
		position: absolute;
		content: "";
		top: 6px;
		left: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commendMian {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5px 10px 0;
		width: 191px;
		height: 199px;
		background-color: #ffffff;
		box-sizing: border-box;
		border-right: 0;
		/* 解决相邻border重合加粗问题 */
		margin: 0 -1px -1px 0;
		border: 1px solid #b5b5b5;
	}

	.commendMian:nth-child(odd) {
		border-left: 0;
	}

	.commendMian:nth-child(2n) {
		border-right: 0;

	}

	.commendMian:nth-child(1) {
		border-top: 0;
	}

	.commendMian:nth-child(2) {
		border-top: 0;
	}

	.flet {
		margin-left: -5px;

	}

	.commendImg {
		width: 139px;
		height: 91px;
		margin-bottom: 5px;
	}

	.commendyuan {
		margin-top: 6px;
		color: red;
		font-weight: 550;
	}

	.commendyuan span:nth-child(2) {
		margin-left: 5px;
		color: #98989F;
		text-decoration: line-through;
	}

	.commendNumber {

		display: flex;
		padding-right: 15px;
		margin-top: 10px;
		font-size: 14px;
	}

	.commendNumber span:nth-child(1) {
		flex: 1;
	}

	/* 底部导航栏 */

	* {
		margin: 0;
		border: 0;
	}
</style>
